// 自定义 Element Plus 样式

// 卡片
.el-card {
  background-color: var(--el-bg-color) !important;
}

// 菜单 mode:horizontal hover时的展开样式
.el-menu--horizontal.el-menu--popup-container {
  .el-menu-item {
    &.is-active {
      background-color: var(--el-color-primary-light-8);

      &:hover {
        background-color: var(--el-color-primary-light-8);
      }
    }
  }

  .el-sub-menu {
    &.is-opened {
      .el-sub-menu__title {
        color: var(--el-color-primary);
      }
    }

    .el-sub-menu__title {
      &:hover {
        color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-9);
      }
    }
  }
}

// 菜单 mode:vertical collapse:true item背景
.el-menu.el-menu--vertical.el-menu--collapse {
  .el-sub-menu.is-active {
    .el-sub-menu__title {
      background-color: var(--v3-sidebar-menu-active-bg-color);
    }
  }
}

// 侧边栏的 item 的 popper
.el-popper {
  //菜单 mode:vertical collapse:true hover时的展开样式
  .el-menu--vertical.el-menu--popup-container {
    .el-menu-item {
      height: var(--v3-sidebar-menu-item-height);
      border-radius: var(--v3-sidebar-menu-border-radius);

      &.is-active {
        background-color: var(--v3-sidebar-menu-active-bg-color);

        &:hover {
          background-color: var(--v3-sidebar-menu-active-bg-color);
        }
      }

      &:hover {
        background-color: var(--v3-sidebar-menu-hover-bg-color);
      }
    }

    .el-sub-menu {
      &.is-opened,
      &.is-active {
        .el-sub-menu__title {
          color: var(--el-color-primary);
        }
      }

      .el-sub-menu__title {
        height: var(--v3-sidebar-menu-item-height);

        &:hover {
          background-color: var(--v3-sidebar-menu-hover-bg-color);
        }
      }
    }
  }
}

// 分页
.el-pagination {
  // 参考 Bootstrap 的响应式设计 WIDTH = 768
  @media screen and (max-width: 768px) {
    .el-pagination__total,
    .el-pagination__sizes,
    .el-pagination__jump,
    .btn-prev,
    .btn-next {
      display: none;
    }
  }
}
